<%--
  Created by IntelliJ IDEA.
  User: XBB
  Date: 2021/2/18
  Time: 14:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui_ext/dtree/font/dtreefont.css">
</head>
<body>
    <div style="padding: 10px">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>查询条件</legend>
        </fieldset>
        <form  class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name"   placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button  class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm" lay-submit lay-filter="doSearch">查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm">重置
                    </button>
                </div>
            </div>
        </form>


        <table id="menuTable" lay-filter="menuTableFilter"></table>
    </div>

    <script id="toolbarMenu" type="text/html">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="menuAdd">添加</button>
        </div>
    </script>

    <script id="barMenu" type="text/html">
        <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
    </script>

    <!-- 添加和修改的弹出层开始 -->
    <div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">父级菜单：</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select" id="pid_div">
                    <div class="layui-select-title">
                        <input type="hidden" name="pid" id="pid">
                        <ul id="menuTree" class="dtree" data-id="0" style="width: 100%;"></ul>
                        <i class="layui-edge"></i>
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称:</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="name" placeholder="请输入菜单名称"lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单地址:</label>
            <div class="layui-input-block">
                <input type="text" name="href" placeholder="请输入菜单地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">菜单图标:</label>
                <div class="layui-input-inline">
                    <input type="text" name="icon" placeholder="请输入菜单图标"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">TARGET:</label>
                <div class="layui-input-inline">
                    <input type="text" name="target" placeholder="请输入TRAGET" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">是否展开:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="open" value="1" title="展开">
                    <input type="radio" name="open" value="0" title="不展开" checked="checked">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">是否可用:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="available" value="1" checked="checked" title="可用">
                    <input type="radio" name="available" value="0" title="不可用">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center;padding-right: 120px">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-md layui-icon layui-icon-release layui-btn-radius" lay-filter="doSubmit" lay-submit="">&nbsp; 提交</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-md layui-icon layui-icon-refresh layui-btn-radius">&nbsp; 重置</button>
            </div>
        </div>
    </form>
</div>


    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script>

        var menuTab;
        var menuIndex;
        var rightDtree;
        var title;

    layui.extend({
        dtree: '${pageContext.request.contextPath}/static/layui_ext/dtree/dtree'
    }).use(['form','layer','jquery','table','dtree'],function() {
        var form = layui.form, layer = layui.layer, $ = layui.jquery,table = layui.table , dtree = layui.dtree;

        menuTab = table.render({
            elem:"#menuTable"
            ,url:"${pageContext.request.contextPath}/sys/menu/menuRightJson"
            ,cols:[[
                {type:'checkbox'}
                ,{field:'id',title:'菜单ID',align:"center",sort:true}
                ,{field:'parentId',title:'父节点ID',align:"center"}
                ,{field:'title',title:'菜单名称',align:"center"}
                ,{field:'href',title:'地址',align:"center"}
                ,{field:'open',title:'是否展开',align:"center",templet:function (r) {
                        return r.open == 1 ? '展开':'<span style="color: red">不展开</span>'
                    }}
                ,{field:'target',title:'跳转方式',align:"center"}
                ,{field:'icon',title:'图标',align:"center",templet:function (r) {
                        return '<i class="layui-icon">'+r.icon+'</i> '
                    }}
                ,{field:'available',title:'是否可用',align:"center",templet:function (r) {
                        return r.open == 1 ? '可用':'<span style="color: red">不可用</span>'
                    }}
                ,{fixed:'right',title:'操作',align:"center",toolbar:'#barMenu'}
            ]]
            ,toolbar:'#toolbarMenu'
            ,page:true
            ,limit:[5,10,15]
            ,limit:5
        })

        //给查询按钮添加事件
        form.on('submit(doSearch)',function (data) {

            menuTab.reload({
                where:data.field
                ,page:{curr:1}
            })

            return false;
        })

        //监听头部工具栏
        table.on('toolbar(menuTableFilter)',function (obj) {
            if(obj.event == "menuAdd"){
                menuAdd()
            }
        })

        //点击添加按钮的弹出
        function menuAdd() {
            menuIndex = layer.open({
                type:1
                ,title:"添加菜单"
                ,area:['700px','500px']
                ,content:$('#saveOrUpdateDiv')
            })
            //清除表单的内容
            $("#dataFrm").get(0).reset()
            $("#pid").val("")
            form.render()
            title = "添加"
        }

        //给弹出层的dtree赋值
        rightDtree = dtree.render({
            elem: "#menuTree",
            width: "100%",
            url: "${pageContext.request.contextPath}/sys/menu/menuLeftJson" // 使用url加载（可与data加载同时存在）
            ,dataStyle: "layuiStyle"  //使用layui风格的数据格式
            ,response:{message:"msg",statusCode:0}  //修改response中返回数据的定义
            ,select: true //指定下拉树模式
            ,selectTips:"请指定父节点"
        });

        //获取dtree选择的数据
        dtree.on("node('menuTree')" ,function(obj){
            $("#pid").val(obj.param.nodeId)
        });
        
        //给弹出层的form表单submit按钮添加点击事件
        form.on('submit(doSubmit)',function (obj) {
            
            layer.confirm("您确定要"+title+"吗？",function () {
                $.post("${pageContext.request.contextPath}/sys/menu/menuAddOrUpdate",obj.field,function (r) {
                    if(r.code == 0){
                        layer.msg(r.msg,{
                            offset:'15px'
                            ,icon:1
                            ,time:1000
                        },function () {
                            //关闭当前弹出框
                            layer.close(menuIndex)
                            //刷新table
                            menuTab.reload({
                                page:{curr:1}
                            })
                            //刷新左侧tabletree
                            window.parent.left.leftDtree.reload()
                            //下拉菜单也要刷新
                            rightDtree.reload()

                        });
                    }else{
                        layer.msg(r.msg)
                    }

                })
            })
            return false;
        })

        //监听行工具栏
        table.on('tool(menuTableFilter)',function (obj) {
            if(obj.event == "edit"){
                edit(obj.data)
            }else if(obj.event == "del"){
                del(obj.data)
            }
        })

        function edit(data) {
            menuIndex = layer.open({
                type:1
                ,title:"修改菜单"
                ,area:['700px','500px']
                ,content:$('#saveOrUpdateDiv')
            })

            //给表单设置值
            form.val('dataFrm',data)
            $('[name="name"]').val(data.title)
            $("#pid").val(data.parentId)
            dtree.dataInit("menuTree",data.parentId)
            dtree.selectVal("menuTree")
            form.render()

            title = "修改"
        }

        function del(data){
            layer.confirm("确定删除"+data.title+"吗？",function (i) {
                $.post("${pageContext.request.contextPath}/sys/menu/menuDelete",{"id":data.id},function (r) {
                    if(r.code == 0){
                        layer.msg(r.msg,{
                            offset:'15px'
                            ,icon:1
                            ,time:1000
                        },function () {
                            //关闭当前弹出框
                            layer.close(menuIndex)
                            //刷新table
                            menuTab.reload({
                                page:{curr:1}
                            })
                            //刷新左侧tabletree
                            window.parent.left.leftDtree.reload()
                            //下拉菜单也要刷新
                            rightDtree.reload()

                        });
                    }else{
                        layer.msg(r.msg)
                    }

                })
            })
        }

    })
    </script>
</body>
</html>
